<template>
  <div class="scroll-wrap">
  	<div class="panel-input">
      <label class="label-title" for="name">联系人</label>
      <input v-model="form.name" class="input" type="text" id="name" placeholder="请输入姓名">
    </div>
    <div class="panel-input">
      <label class="label-title" for="phone">手机号</label>
      <input v-model="form.phone" v-on:blur="checkPhone(null, $event)" class="input" type="number" name="phone" id="phone" placeholder="请输入电话">
    </div>
    <div class="panel-input">
      <label class="label-title" for="city" id="city">城市</label>
      <Picker v-if="addressArea.length" title="居住地址" :location="location" @get-val="addressPick" :column="2" :datas="addressArea" />
      <input v-model="form.province" type="hidden" name="province">
      <input v-model="form.city" type="hidden" name="city">
    </div>
    <div class="panel-input">
      <label class="label-title" for="address">详细地址</label>
      <input v-model="form.address" class="input" type="text" name="address" id="address" placeholder="请输入详细地址">
    </div>
    <template v-if="!address_id">
      <a class="btn" v-if="disabledSubmit">保存</a>
      <a class="btn btn-red" v-else @click="submitAddress">保存</a>
    </template>
    <a class="btn btn-red" v-else @click="modifyAddress(address_id)">修改</a>
  </div>
</template>
<script>
  import Picker from './base/citypicker'
  import $http from '@/api'
  import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        form: {
          name: null,
          phone: null,
          province: null,
          city: null,
          address: null
        },
        address_id: null,
        disabledSubmit: false
      }
    },
    computed: {
      ...mapGetters({
        addressArea: 'addressArea'
      }),
      location() {
        let area = this.form
        return {
          id: (area.provinceid || '360000') + ' ' + (area.cityid || '360200'),
          name: (area.province || '江西省') + ' ' + (area.city || '景德镇市')
        }
      }
    },
    created() {
      this._getAddress()
      // 获得省市信息
      this.$store.dispatch('getAddressArea')
    },
    methods: {
      _getAddress() {
        let id = this.$route.query.address_id
        this.address_id = id
        if (id) {
          $http.getAddress(id)
          .then(res => {
            if (res.code === 0) {
              this.form = res.data
            }
          })
        } else {
          this.form = {
            name: null,
            phone: null,
            province: null,
            city: null,
            address: null
          }
        }
      },
      goback() {
        this.$router.go(-1)
      },
      addressAdd() {
        $http.addressAdd()
        .then(res => {
          if (res.code === 0) {
             this.$layer.toast({
              content: '添加地址成功',
              time: 2000
            })
          } else {
            this.$layer.toast({
              content: '添加地址失败',
              time: 2000
            })
          }
        })
      },
      modifyAddress(id) {
        $http.addressUpdate(this.form)
        .then(res => {
          let outTime = 2000
          if (res.code === 0) {
             this.$layer.toast({
              content: '修改成功',
              time: outTime
            })
            setTimeout(() => {
              location.href = '/address_list'
            }, outTime)
          } else {
            this.$layer.toast({
              content: '修改失败',
              time: outTime
            })
          }
        })
      },
      addressPick(name, code) {
        let aCode = name.split(' ')
        this.form.province = aCode[0]
        this.form.city = aCode[1]
      },
      checkPhone(value) {
        let reg = /^1[34578][0-9]{9}$/
        let val = value || event.target.value
        if (!reg.test(val)) {
          this.$layer.toast('手机号不正确，请重新填写')
        }
      },
      submitAddress() {
        let checkData = this.form
        if (!checkData.name) {
          this.$layer.toast('请填写用户名称')
          return
        } else if (!checkData.phone) {
          this.checkPhone(checkData.phone)
          return
        } else if (!checkData.province || !checkData.city) {
          let tmpArr = this.location.name.split(' ')
          checkData.province = tmpArr[0]
          checkData.city = tmpArr[1]
        } else if (!checkData.address) {
          this.$layer.toast('请填写您的具体地址')
          return
        }
        this.disabledSubmit = true
        $http.addressAdd(checkData)
        .then(res => {
          if (res.code === 0) {
            this.$layer.toast('添加地址成功！')
            this.$router.go(-1)
          } else {
            this.disabledSubmit = false
            this.$layer.toast('添加地址失败！')
          }
        })
      }
    },
    components: {
      Picker
    },
    watch: {
      $route() {
        this._getAddress()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~@/assets/styles/address';
</style>
